<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <el-scrollbar>
      <el-row v-if="props.tabsList.length > 0">
        <el-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          v-for="(item, index) in tabsList"
          :key="index"
        >
          <el-button
            :type="'primary'"
            :text="activeIndex != index"
            class="!w-100%"
            :class="{ 'color-060606': activeIndex != index }"
            @click="setActiveIndex(index)"
          >
            <div class="text-justify"> {{ item.name }} </div>
          </el-button>
        </el-col>
      </el-row>
    </el-scrollbar>
  </ContentWrap>
</template>
<script setup lang="ts" name="tabsAside">
import { propTypes } from '@/utils/propTypes'
import { ref } from 'vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
// 声明props
const props = defineProps({
  tabsList: propTypes.arrayOf(propTypes.object).def([])
})

// 声明传值
const emit = defineEmits(['activeTabIndex'])
// 定义变量
const activeIndex = ref(0) //选中的下标
// 定义方法
const setActiveIndex = (index: number) => {
  activeIndex.value = index
  emit('activeTabIndex', index) //传递选中的tab
} //设置选中的tab下标

defineExpose({ setActiveIndex })
</script>
<style lang="scss" scoped></style>
